import { FC, useState } from 'react';
import { produce } from 'immer';
const ImmerDemo: FC = () => {
  const [userInfo, setUserInfo] = useState({
    name: '张三',
    age: 18,
  });
  const [list, setList] = useState(['x', 'y', 'z']);
  const changeAge = () => {
    setUserInfo(
      produce(userInfo, (draft) => {
        draft.age = 20;
      })
    );
  };
  return (
    <div>
      <h1>Immer Demo</h1>
      <div>{JSON.stringify(userInfo)}</div>
      <div>{JSON.stringify(list)}</div>
      <button onClick={changeAge}>变更用户信息</button>
      <button
        onClick={() =>
          setList(
            produce(list, (draft) => {
              draft.push('a');
            })
          )
        }
      >
        变更列表
      </button>
    </div>
  );
};
export default ImmerDemo;
